<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相机</title>
 <style>
	 body{
		 margin:0;
		 padding:0;
	 }
 canvas {
	 width: 1000px;
	 height: 600px;
	 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
  <!-- <canvas id="canvas1"></canvas> -->

 <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
 <script>
	 // var camera, scene, renderer, canvas;

		 var canvas = document.getElementById('canvas');
		 clientWidth = canvas.clientWidth;
		 clientHeight = canvas.clientHeight;
		 
		 init(canvas,clientWidth,clientHeight)
		 
		 // var canvas1 = document.getElementById('canvas1');
		 // clientWidth = canvas1.clientWidth;
		 // clientHeight = canvas1.clientHeight;
		 
		 // init(canvas1,clientWidth,clientHeight)
		 
		 function getTextCanvas(text){ 
		  var width=512, height=256; 
		  var canvas = document.createElement('canvas');
		  canvas.width = width;
		  canvas.height = height;
		  var ctx = canvas.getContext('2d');
		  ctx.fillStyle = '#C3C3C3';
		  ctx.fillRect(0, 0, width, height);
		  ctx.font = 50+'px " bold';
		  ctx.fillStyle = '#2891FF';
		  ctx.textAlign = 'center';
		  ctx.textBaseline = 'middle';
		  ctx.fillText(text, width/2,height/2); 
		  return canvas;
		  }
		 
		 function init(canvas,clientWidth,clientHeight){
			 //总对象
			 var scene = new THREE.Scene();
			 
			 
			 // var camera = new THREE.PerspectiveCamera(45, 1000/800, 1, 100); //视角 横纵比 近面的距离 远面的距离
			 var camera = new THREE.PerspectiveCamera(65, clientWidth / clientHeight, 100, 10000); //透视相机
			 // camera.position.set(1, 1, 1);
			 // scene.add(camera);
			 
			 
			var geometry = new THREE.CubeGeometry(100, 100, 100); //z  width height 
			// var geometry = new THREE.BoxGeometry(100, 100, 100); //z  width height 

			for ( var i=0; i<geometry.faces.length; i+=2 ){
				var hex = Math.random() * 0xffffff;
				console.log(i)
				 // || i == 6 || i == 8 || i == 10
				if(i == 2){
					var hex = 13522707;
					geometry.faces[i].color.setHex(hex);
					geometry.faces[i+1].color.setHex(hex);
				}
				if(i == 4){
					var hex = 15383582;
					geometry.faces[i].color.setHex(hex);
					geometry.faces[i+1].color.setHex(hex);
				}
				if(i == 8){
					var hex = 1088729;
					geometry.faces[i].color.setHex(hex);
					geometry.faces[i+1].color.setHex(hex);
				}
				 
				// console.log(15383582);
				
				

				// 上 15383582
				// 前 13522707
				// 右 1088729
				// var scolor="#ffffff"
				//    parseInt(scolor.slice(1),16)
			}



			var material = new THREE.MeshBasicMaterial({
			 // color: 'yellow',
			 //wireframe:true, //变成线框

				vertexColors: THREE.FaceColors,//颜色
			
			
			});
			 
				 //console.log(getTextCanvas('111'))

			 
			 
			// cube 是一个可以填充的形状
			// var cube = new THREE.Mesh(geometry, material);
		
			var materials = [ 
			 new THREE.MeshBasicMaterial( { color: 'blue' } ), // right
			 new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(getTextCanvas('长')) }  ), // left
			 new THREE.MeshBasicMaterial( { color: 'green'} ), // top
			 new THREE.MeshBasicMaterial( { color: 'black' } ), // bottom
			 new THREE.MeshBasicMaterial( { color: 'green' } ), // back
			 new THREE.MeshBasicMaterial( { color: 'red' } ) // front 
			 ]
			
			
			let cube = new THREE.Mesh(
			        new THREE.BoxGeometry(100, 100, 100),
							materials
			        // new THREE.MeshBasicMaterial( {
			        //     color: 'yellow' }
			        // )
			    );
					
					
	
					
			
			cube.rotation.x = 0.3;  //x轴转
			cube.rotation.y = 1;//y轴转
			scene.add(cube);
		 
		 var renderer = new THREE.WebGLRenderer({
			 // 将canvas交给renderer 一个渲染的容器
			 canvas: canvas,
			 // 平滑， 抗锯齿 输出的画面会进行优化，不会带毛边
			 antialias: true,
				// alpha:true, //背景透明
		 });
		
			camera.position.z = 300; //100-10000范围
			 // 设置renderer的样子
			 renderer.setSize(clientWidth, clientHeight); //设置canvas大小
			 
			 // renderer.setClearColor(0xFFFFFF, 0.0);
			 renderer.render(scene, camera);
	}

 </script>
</body>
</html>
<!-- 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#canvas{
  width:1100px;
  height:600px;
  background:palevioletred;
  border:1px solid;
}
</style>
<!--步骤（自认为）
  1.设置three.js渲染器
  2.设置场景scene
  3.设置物体object
  4.设置摄像机camera
  5.设置光源light

<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script>
//渲染器
var renderer;
function init_Three_renderer() {
  width = document.getElementById("canvas").clientWidth;
  height = document.getElementById("canvas").clientHeight;
  renderer = new THREE.WebGLRenderer({ //生成渲染对象
    antialias: true //去锯齿
  });
  renderer.setSize(width, height); //设置渲染的宽度和高度；
  document.getElementById("canvas").appendChild(renderer.domElement);
  renderer.setClearColor(0xEEEEEE, 1); //设置渲染的颜色；
}
//场景
var scene;
  
function init_Three_scene() {
  scene = new THREE.Scene();
}
//物体
var cube;
  
function init_Three_object() {
  var geometry = new THREE.CubeGeometry(20, 20, 20); //几何体 （长，宽，高）
  //var texture = THREE.ImageUtils.loadTexture("b.jpg",null,function(t){});//添加纹理
  //var material = new THREE.MeshLambertMaterial({color:0x00ff00,map:texture});
  var material = new THREE.MeshLambertMaterial({
    color: 0x00ff00
  }); //表面有光泽的材质类型
  cube = new THREE.Mesh(geometry, material);
  //cube.position.set(0,0,0);//设置几何体的位置（x,y,z）
  scene.add(cube);
}
// 相机
var camera;
  
function init_Three_camera() {
  camera = new THREE.PerspectiveCamera(50, width / height, 1, 5000); //透视相机
  camera.position.x = 20
  camera.position.y = 20;
  camera.position.z = 50;
  
  camera.up.x = 0; //设置相机的上为「x」轴方向
  camera.up.y = 1; //设置相机的上为「y」轴方向
  camera.up.z = 0; //设置相机的上为「z」轴方向
  camera.lookAt({
    x: 0,
    y: 0,
    z: 0
  }); //设置视野的中心坐标
}
//        光源
var light;
  
function init_Three_light() {
  light = new THREE.DirectionalLight(0xffffff, 1); //设置平行光源 (光颜色，光强度)
  light.position.set(10, 30, 20); //设置光源向量 (x,y,z)
  scene.add(light);
}
  
function ThreeJs_Main() {
  init_Three_renderer(); //渲染
  init_Three_scene(); //场景
  init_Three_object(); //物体
  init_Three_camera(); //相机
  init_Three_light(); //光源
  variation(); //动画循环
}
  
function variation() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.clear();
  renderer.render(scene, camera);
  requestAnimationFrame(variation);
}
</script>
</head>
<body>
  <div id="canvas"></div>
</body>
</html> -->